<template>
  <div class="box">
    <div class="PK_enterprise">
      <div class="PK_enterprise_left">
        <div class="left_title">企业</div>
        <div class="left_text">{{ this.d2CorpName }}</div>
      </div>
      <div class="PK_enterprise_right">
        <div class="right_title">行业</div>
        <div class="right_text">{{ this.d2Industryco }}</div>
      </div>
      <div class="pk_img">
        <img src="~img/lookAround/pk.png" alt="" />
      </div>
    </div>
    <div v-for="(item, index) in trendList" :key="index">
      <div class="identity_information" :class="item.title.length==2?'identity_information2':''">{{ item.title }}</div>
      <div class="revenue_echarts">
        <businessTrendsEcharts
          :Color="'#3282E4'"
          :x="item.x"
          :y="item.y[0]"
          :y2="item.y[1]"
        ></businessTrendsEcharts>
      </div>
    </div>

    <!-- <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div>
    <div class="identity_information">贷款余额</div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#3282E4'"></businessTrendsEcharts>
    </div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div> -->
  </div>
</template>
<script>
import businessTrendsEcharts from "../../components/lookAround/businessTrendsEcharts.vue";
import { industPk } from "@/interfaces/lookAround/index.js";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    businessTrendsEcharts,
  },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      corpKey: "",
      d2CorpName: "",
      d2Industryco: "",
      list: [],
      trendList: [],
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.corpKey = this.$route.query.corpKey;
    this.d2CorpName = this.$route.query.d2CorpName;
    this.d2Industryco = this.$route.query.d2Industryco;
    this.list = JSON.parse(this.$route.query.list);
    console.log(
      this.corpKey,
      this.d2CorpName,
      this.d2Industryco,
      this.list,
      "222"
    );
    this.getList();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    async getList() {
      let params = {
        corpKey: this.corpKey,
        tab: this.list,
      };
      console.log("Pk数据");
      const res = await industPk({ ...params });

      this.trendList = res.data.trendList;
    },
  }, // all the methods should be put here in the last
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  overflow: auto;
}
.PK_enterprise {
  display: flex;
  width: 100%;
  height: 90px;
  //   background-color: aqua;
  padding: 0 10px;
  position: relative;
  margin-top: 20px;
}
.PK_enterprise_left {
  width: 50%;
  height: 100%;
  border-left: 2px solid #3282e4;
  background-color: #f7fbff;
  padding: 10px 35px 10px 10px;
}
.PK_enterprise_right {
  width: 50%;
  height: 100%;
  border-right: 2px solid #eb8a2a;
  background-color: #fff8f1;
  text-align: right;
  padding: 10px 10px 10px 35px;
}

.left_title {
  color: #3282e4;
  font-weight: bold;
}
.left_text {
  font-size: 14px;
  margin-top: 5px;
  // font-weight: bold;

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical; //盒子中内容竖直排列、
  font-family: "PuHuiTi65";
}
.right_title {
  color: #eb8a2a;
  font-weight: bold;
}
.right_text {
  font-size: 14px;
  margin-top: 5px;

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.pk_img {
  position: absolute;
  left: calc(50% - 32.5px);
  top: calc(50% - 32.5px);
  img {
    width: 65px;
  }
}
.identity_information {
 // background-color: #ecf3fd;
 background-image: url("~img/lookAround/title_low.png");
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  // font-weight: 600;
  background-size: 155% 100%;
  background-position-x: -120px;
  // margin-bottom: 10px;
  margin-top: 10px;
  font-family: "PuHuiTi65";
}
.identity_information2{
   background-size: 132% 100%;
}
.revenue_echarts {
  margin-top: 10px;
  width: 100%;
  height: 150px;
}
</style>
